<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { canceled, payed, unPayed } from '@/api/order';
import { useUserStore } from '@/stores/user';
const store = useUserStore()
const router = useRouter()
//获取数据
const pageObj = {
    pageNum: 1,
    pageSize: 10
}
const payedList = ref(undefined)
const unPayedList = ref(undefined)
const canceledList = ref(undefined)
async function getList() {
    const r1 = await payed(pageObj)
    const r2 = await unPayed(pageObj)
    const r3 = await canceled(pageObj)
    store.setOrderNum({
        unpay: r2.data.total,
        payed: r1.data.total
    })
    payedList.value = r1.data.records
    unPayedList.value = r2.data.records
    canceledList.value = r3.data.records
}
getList()
// 切换tab
const tabIndex = ref('0')
const underline = ref(undefined)
function switchTab(e){
    if(e.target.tagName === 'A'){
        tabIndex.value =  e.target.dataset.index
        underline.value.style.left = (e.target.offsetLeft + 20) + 'px'
    }
}
// 查看详情
function checkDetail(item){
   router.push(`/order?id=${item.id}&address=${item.address}&name=${item.consignee}&time=${item.orderTime}&phone=${item.phone}&amount=${item.amount.toFixed(2)}&status=${item.status}&estimatedDeliveryTime=${item.estimatedDeliveryTime}`)
    
}
</script>
<template>
    <div class="right">
        <div class="top" @click="switchTab">
            <a href="#" data-index="0" @click.prevent>待支付</a>
            <a href="#" data-index="1" @click.prevent>已取消</a>
            <a href="#" data-index="2" @click.prevent>已完成</a>
            <div class="under_line" ref="underline"></div>
        </div>
        <div class="order_content" v-show="tabIndex === '2'">
            <table v-if="payedList?.length > 0">
                <tr>
                    <th>订单号</th>
                    <th>订单状态</th>
                    <th>下单时间</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in payedList" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td> {{item.status === 3 ? "已发货":"已支付"}} </td>
                    <td>{{ item.orderTime }}</td>
                    <td>￥{{ item.amount.toFixed(2) }}</td>
                    <td><button @click="checkDetail(item)">查看详情</button></td>
                </tr>
            </table>
            <h1 v-else>暂时没有数据，快去下单吧！</h1>
        </div>
        <div class="order_content" v-show="tabIndex === '0'">
            <table v-if="unPayedList?.length > 0">
                <tr>
                    <th>订单号</th>
                    <th>订单状态</th>
                    <th>下单时间</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in unPayedList" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td> 待支付 </td>
                    <td>{{ item.orderTime }}</td>
                    <td>￥{{ item.amount.toFixed(2) }}</td>
                    <td><button @click="checkDetail(item)">查看详情</button></td>
                </tr>
            </table>
            <h1 v-else>暂时没有数据，快去下单吧！</h1>

        </div>
        <div class="order_content" v-show="tabIndex === '1'">
            <table v-if="canceledList?.length > 0">
                <tr>
                    <th>订单号</th>
                    <th>订单状态</th>
                    <th>下单时间</th>
                    <th>金额</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in canceledList" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td> 已取消 </td>
                    <td>{{ item.orderTime }}</td>
                    <td>￥{{ item.amount.toFixed(2) }}</td>
                    <td><button @click="checkDetail(item)">查看详情</button></td>
                </tr>
            </table>
            <h1 v-else>暂时没有数据，快去下单吧！</h1>
        </div>
    </div>
</template>
<style scoped lang="less">
.right {
    background-color: #fff;
    float: right;
    height: 75%;
    width: 978px;
    padding: 0 40px;
    color: #757575;

.order_content{
    padding-top: 20px;
    table{
        width: 100%;
        text-align: center;
        tr{
            height: 25px;
        }
    }
}

    .top {
        position: relative;
        height: 50px;
        display: flex;

        a {
            padding: 20px;
        }

        .under_line {
            position: absolute;
            left: 20px;
            bottom: 0;
            width: 44px;
            height: 2px;
            background-color: black;
        }
    }
}
</style>